<template>
	<view>
		<view class="search-cont">
			<view class="search">
				<input type="text" placeholder-class="inputclass" confirm-type="搜索" focus="true" placeholder="请输入关键字" v-model="searchdata" @confirm="onKeyInput" />
			</view>
			<view class="search-code" @click="searchInput">搜索</view>
		</view>
		<!-- 搜索历史 -->
		<view class="search-history" v-if="searchHistory">
			<view class="search-title">
				<view>最近搜索</view>
				<view @click="SearchEmpty"><image src="/static/search/searchend.svg" mode="widthFix"></image></view>
			</view>
			<!-- tab -->
			<view class="menu-block">
				<view v-for="(item, index) in searchData" :key="index">
					<view @click="searchbtn(item)">{{ item }}</view>
				</view>
			</view>
		</view>
		<!-- 搜索组件结果 -->
		<Card :carddata="carddata" v-if="!searchno"></Card>
		<TheDropdown ref="refresh"></TheDropdown>
		<!-- 没有搜索结果 -->
		<view class="empty-cart" v-if="searchno">
			<image src="/static/search/sousuono.svg" mode="widthFix"></image>
			<text>抱歉！暂无相关商品</text>
		</view>
	</view>
</template>

<script>
import Card from '../card/card.vue';
import TheDropdown from '../theDropdownIoad/theDropdownIoad.vue';

export default {
	components: {
		Card,
		TheDropdown
	},
	data() {
		return {
			searchdata: '',
			// 是否有搜索历史
			searchHistory: false,
			searchData: [],
			pageid: 0,
			// 搜索组件结果：[]
			carddata: [],
			// 没有搜索结果
			searchno: false,
			// 最后一次搜索
			finallysearch: ''
		};
	},
	created() {
		this.setStrorage();
	},

	methods: {
		// 点击搜索
		searchInput() {
			if (this.searchdata != '') {
				this.pageid = 0
				this.getStorage(this.searchdata);
				this.commodityInterface(this.searchdata);
				this.searchHistory = false;
			}
		},
		// 键盘搜索
		onKeyInput(e) {
			let searchkey = e.detail.value;
			if (searchkey != '') {
				this.pageid = 0
				this.getStorage(searchkey);
				this.commodityInterface(searchkey);
				this.searchHistory = false;
			}
		},
		// 存储搜索历史到本地缓存
		getStorage(searchkey) {
			// 存之前先取出之前的搜索历史
			let seararay = uni.getStorageSync('search_key') || [];
			seararay.unshift(searchkey);
			uni.setStorageSync('search_key', seararay);
			//存uni.setStorageSync
			// 取uni.getStorageSync
		},
		// 取出本地缓存的搜索历史
		setStrorage() {
			let setdata = uni.getStorageSync('search_key');
			// console.log(setdata);
			// 数组去重
			let setdataArr = Array.from(new Set(setdata));
			// console.log(setdataArr);
			if (setdataArr.length === 0) {
				this.searchHistory = false;
			} else {
				//把setdataArr的值赋值给searchData空数组然后进行循环
				this.searchData = setdataArr;
				this.searchHistory = true;
			}
		},
		// 请求搜索历史
		SearchEmpty() {
			uni.removeStorageSync('search_key');
			this.setStrorage();
		},
		// 点击搜索历史跳转
		searchbtn(item) {
			this.pageid = 0
			this.searchHistory = false;
			this.commodityInterface(item);
		},
		// 请求商品接口
		async commodityInterface(searchkey, id = '001') {
			this.finallysearch = searchkey;
			const keys = '?keyword=' + searchkey + '&' + 'page=' + this.pageid;
			try {
				let searchdata = await new this.Request(this.Usls.m().searchurl + keys).modeget();

				console.log(searchdata);
				//搜索长度为0就显示没有搜索结果

				if (id == '002') {
					// 上拉加载

					if (searchdata.data.length === 0) {
						this.$refs.refresh.loAd({ wether: true, title: '没有更多了', pictuer: false });
					} else {
						this.carddata = [...this.carddata, ...searchdata.data];
					}
				} else {
					this.$refs.refresh.loAd({ whether: false });
					if (searchdata.data.length === 0) {
						this.searchno = true;
					} else {
						this.carddata = searchdata.data;
						this.searchno = false;
					}
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		onReachBottom() {
			console.log();
			this.$refs.refresh.loAd({ wether: true });
			this.pageid++;
			this.commodityInterface(this.finallysearch, '002');
		}
	}
};
</script>

<style scoped>
.search {
	
	height: 70upx;
	line-height: 70upx;
	width: 100%;
	display: flex;
	flex-direction: row;
	background: #ffffff;
	border-radius: 20upx;
	margin-left: 20upx;
}
.search input {
	height: 70upx;
	line-height: 70upx;
	width: 100%;
	font-size: 30upx;
	color: #666666;
	padding-left: 30upx;
}
.search-cont {
	
	
	display: flex;
	justify-content: space-between;
	height: 70upx;
	align-items: center;
	padding: 30upx 0;
	background: #f8f8f8;
}
.search-code {
	width: 150upx;
	height: 50upx;
	text-align: center;
	font-size: 30upx;
}
.search-history {
	
	margin: 20upx;
}
.search-title {
	font-size: 30upx;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60upx;
	line-height: 60upx;
}
.search-title image {
	width: 36upx;
	height: 36upx;
	display: block;
}
.menu-block view {

	background: #f7f8fa;
	border-radius: 6upx;
	font-size: 27upx;
	line-height: 36upx;
	color: #292c33;
	text-align: center;
	padding: 10upx;
	margin: 20upx 20upx 0 0;
}

.menu-block {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.empty-cart image {
	width: 200upx;
	height: 200upx;
	display: block;
	padding-bottom: 30rpx;
}
.empty-cart {
	width: 300rpx;
	height: 230rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: auto;
	color: rgb(102, 102, 102);
	padding-top: 200rpx;
}
</style>
